<!--用户管理-->
<template>
    <div class="power">
        <div class="contentStyle ">
            <el-row class="paddingBottom mb15 pl20">
                <el-col :span="12">
                    <el-button class="btnDefault" @click="linkTo1">新增权限</el-button>
                </el-col>
                <el-col :span="12 " class="textRight pr20 textWhite pt10">
                    当前位置：权限应用管理
                </el-col>
            </el-row>
            <div class="table padding20">
                <el-table
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="id"
                        border
                        default-expand-all
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            prop="mc"
                            label="名称"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="dm"
                            label="代码"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="url"
                            label="URL">
                    </el-table-column>
                    <el-table-column
                            prop="tb"
                            label="图标">
                    </el-table-column>
                    <el-table-column
                            prop="cd"
                            label="菜单">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                             width="160" >
                        <template slot-scope="scope">
                            <span class="normalColor mr10 cursor" @click="linkTo(scope.row.id)">编辑权限</span>
                            <span class="normalColor cursor" @click="deleteRow(scope.row)">删除权限</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <pages :page="page"
                       @changePage="changePage"></pages>
            </div>
        </div>

    </div>
</template>

<script>
  import pages from "../base/pages.vue"
import { log } from 'util';
  export default {
    name:'power',
    data() {
      return {
        page: {
          //总条数
          total: 31,
          //每页条数
          limit: 10,
          //当前页数
          currentPage: 1,
          pageSizes: [10, 25, 50, 100],
          //实际返回的条数
          dataLength: 7,
        },
        tableData: [
          {
            id: 1,
            dm: "2016-05-02",
            mc: "王小虎",
            tb: "上海"
          }, {
            id: 2,
            dm: "2016-05-04",
            mc: "王小虎",
            tb: "南京"
          }, {
            id: 3,
            dm: "2016-05-01",
            mc: "王小虎",
            tb: "广州",
            children: [{
              id: 31,
              dm: "2016-05-01",
              mc: "王小虎",
              tb: "北京"
            }, {
              id: 32,
              dm: "2016-05-01",
              mc: "王小虎",
              tb: "上海"
            }]
          }, {
            id: 4,
            dm: "2016-05-03",
            mc: "王小虎",
            tb: "上海"
          }]
      };
    },
    computed: {},
    mounted() {
      this.dataList()
    },
    methods: {
      linkTo(id){
        if(id){
          this.$router.push({ name: 'powerInfo', query: { powerId: id } })
        }else{

        }
      },
      linkTo1(){
        this.$router.push({ name: 'powerInfo' ,query:{ powerId: "新增保存" }})
      },
      dataList(){
        this.$axios.get("/power/query/menu/all").then(res=>{

        })
      },
      deleteRow(row){
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      changePage(data) {
        this.page = data
      }
    },
    components:{
      pages
    }
  };
</script>


<style scoped lang="less">
    .power{
        height: 100%;
        box-shadow: 0 0 5px 2px #30334e99;
        .contentStyle{
            position: relative;
            height: 100%;
        }
    }

</style>
